<template>
<view class="user-content">
  <view class="user_info">
    <image class="img" v-if="loginStore.userInfo.avatar" :src="loginStore.userInfo.avatar"/>
    <image class="img" v-else src="/static/image/user-default.png"/>
    <view class="name">
      <view class="user_name">{{loginStore.userInfo.nickName}}</view>
    </view>
  </view>
  <view class="tool">
    <view class="tool_item">
      <u-icon name="edit-pen-fill"></u-icon>
      <view class="tool_text">关联账号</view>
      <u-icon name="arrow-right"></u-icon>
    </view>
    <view class="tool_item">
      <u-icon name="bookmark-fill"></u-icon>
      <view class="tool_text">商品合作</view>
      <u-icon name="arrow-right"></u-icon>
    </view>
    <view class="tool_item">
      <u-icon name="setting-fill"></u-icon>
      <view class="tool_text">协议与说明</view>
      <u-icon name="arrow-right"></u-icon>
    </view>
  </view>
  <f-wxLogin />
</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { useLoginStore } from '@/stores/login';

const loginStore = useLoginStore();

onLoad(() => {
  if (!loginStore.isLogin) {
  }
});
</script>

<style lang="scss" scoped>
.user-content {
  padding: 28rpx 28rpx 82px;
  > view {
    border-radius: 10rpx;
  }
  .user_info {
    display: flex;
    align-items: center;
    height: 120rpx;
    padding: 0rpx 28rpx;
    margin-bottom: 28rpx;
    background-color: #fff;

    .img {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
      border-radius: 50%;
    }

    .name {
      flex: 1;
      color: #333;
      font-weight: 700;
      line-height: 44rpx;
    }

    .user_name {
      color: #7A7A7B;
      font-weight: normal;

    }

    .change_store {
      line-height: 100rpx;
      font-weight: 700;
      color: $theme-color;
    }
  }
  .tool {
    margin-bottom: 28rpx;
    background-color: #fff;
    .tool_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 28rpx;
      .tool_text {
        flex: 1;
        padding-left: 10rpx;
      }
    }
  }
}
</style>
